<script lang="ts" setup>
import type { PlusColumn } from 'plus-pro-components'

import { getLabelValue } from '@fl/api/anjutong'
import UpdatedOss from '@fl/components/upLoad-oss.vue'

type ICat = {
    label: string
    value: string
}
const props = defineProps(['state', 'loading'])

const emits = defineEmits(['close', 'submit', 'updateloading'])
const { loading, state } = toRefs(props)

const catList = ref<ICat[]>([])
const columns: PlusColumn[] = [
    {
        label: '产品名称',
        prop: 'name',
        valueType: 'copy',
    },
    {
        fieldProps: { min: 0, precision: 0 },
        label: '授信额度',
        prop: 'creditLimit',
        valueType: 'input-number',
    },
    {
        label: '产品分类',
        options: async () => {
            const data = await getLabelValue(1)
            catList.value = data
            return data ?? []
        },
        prop: 'catId',
        valueType: 'select',
    },
    {
        label: '金融机构',
        options: async () => {
            const data = await getLabelValue(2)
            return data ?? []
        },
        prop: 'financialId',
        valueType: 'select',
    },
    {
        fieldProps: { max: 100, min: 0, precision: 2 },
        label: '授信利率',
        prop: 'interestRate',
        valueType: 'input-number',
    },
    {
        label: '产品编码',
        prop: 'code',
        valueType: 'copy',
    },
    {
        hideInForm: computed(() => {
            const params = catList.value.find((item: ICat) => item.value === state?.value.catId)
            return params?.label !== '安居险'
        }),
        label: '产品类型',
        options: async () => {
            const data = await getLabelValue(3)
            return data ?? []
        },
        prop: 'type',
        valueType: 'select',
    },
    {
        label: '跳转类型',
        options: [
            {
                label: '小程序',
                value: '0',
            },
            {
                label: '超链接',
                value: '1',
            },
        ],
        prop: 'linkType',
        valueType: 'select',
    },
    {
        label: '办理链接',
        prop: 'linkUrl',
        valueType: 'copy',
    },
    {
        label: 'appID',
        prop: 'appId',
        valueType: 'copy',
    },
    {
        label: '启用',
        prop: 'status',
        valueType: 'switch',
    },
    {
        fieldProps: { max: 9999, min: 0, precision: 0 },
        label: '排序',
        prop: 'sort',
        valueType: 'input-number',
    },
    {
        label: '备注',
        prop: 'remark',
        valueType: 'textarea',
    },
    {
        label: '产品标签',
        prop: 'tag',
        valueType: 'copy',
    },
    {
        label: '产品banner',
        prop: 'banner',
    },
    {
        label: '产品详情页',
        prop: 'img',
    },
]

const rules = {
    catId: [
        {
            message: '请选择产品',
            required: true,
        },
    ],
    code: [
        {
            message: '请输入产品名称',
            required: true,
        },
    ],
    financialId: [
        {
            message: '请选择金融机构',
            required: true,
        },
    ],
    name: [
        {
            message: '请输入产品编码',
            required: true,
        },
    ],
    type: [
        {
            message: '请选择产品类型',
            required: true,
        },
    ],
}

function mySubmit() {
    emits('submit')
}
</script>

<template>
    <el-card>
        <PlusForm v-model="state"
                  :columns="columns"
                  :rules="rules"
                  label-width="100"
                  @submit="mySubmit"
        >
            <template #plus-field-banner>
                <UpdatedOss v-model="state.banner"
                            accept=".png,.jpg,.jpeg"
                            :size="200"
                            @success="emits('updateloading', false)"
                            @before-upload="emits('updateloading', true)"
                />
            </template>

            <template #plus-field-img>
                <UpdatedOss v-model="state.img"
                            accept=".png,.jpg,.jpeg"
                            :size="200"
                            @success="emits('updateloading', false)"
                            @before-upload="emits('updateloading', true)"
                />
            </template>

            <template #footer="{ handleSubmit }">
                <div style="margin: 0 auto">
                    <el-button @click="emits('close')">
                        返回
                    </el-button>

                    <el-button type="primary"
                               :loading="loading"
                               @click="handleSubmit"
                    >
                        提交
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </el-card>
</template>
